<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-24 16:49:36
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-11-20 13:39:36
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\formModel\electronicForms\formDesign.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="formDesign">
    <v-form-designer
      ref="formDesigner"
      :appId="appId"
      :erMark="erMark"
      :formCode="formCode"
      :baseApi="baseApi"
    ></v-form-designer>
    <div
      style="
        display: flex;
        align-item: center;
        position: absolute;
        right: 320px;
      "
    >
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { workflowForm, workflowFormUpdate,saveNodeApprover } from "@/api/app/electronicForms.js";
export default {
  name: "formDesign",
  data() {
    return {
      formConfig: {},
      widgetList: [],
      row: {},
      appId: undefined,
      formCode: undefined,
      erMark:undefined,
      baseApi:undefined,
      tablePrefix:undefined
    };
  },
  async mounted() {
    this.baseApi = process.env.VUE_APP_BASE_API
    const { row, appId, formCode,erMark,tablePrefix } = this.$route.params;
    this.row = row;
    this.appId = appId;
    this.formCode = formCode;
    this.erMark = erMark
    this.tablePrefix = tablePrefix
    const res = await workflowForm(this.row.id);
    if (res.code == 200 && res.data?.formConfig && res.data?.widgetList) {
      this.formConfig = JSON.parse(res.data?.formConfig);
      this.widgetList = JSON.parse(res.data?.widgetList);
      this.$refs.formDesigner.clearDesigner();
      let formJson = {
        formConfig: this.formConfig,
        widgetList: this.widgetList,
      };
      this.$refs.formDesigner.setFormJson(formJson);
    } else {
      this.$refs.formDesigner.clearDesigner();
      // let formJson = this.$refs.formDesigner.getFormJson();
      // this.$refs.formDesigner.setFormJson(formJson);
    }
  },

  methods: {
    async handleSubmit() {
      const { row } = this.$route.params;
      const nodeApproverData = await this.$refs['formDesigner'].getFieldWidgets()
      const nodeApproverParamsList = []
      nodeApproverData.forEach(item=>{
        if(item.type === 'node-approver') {
          nodeApproverParamsList.push({taskId:item.name,taskName:item.field?.options.label,formName:row.code,tableName:row.formCode,formId:row.id})
        }
      })
      if(nodeApproverParamsList?.length){
        await saveNodeApprover(nodeApproverParamsList)
      }
      const data = this.$refs.formDesigner.getFormJson();
      const res = await workflowFormUpdate({
        formId: this.row.id,
        formConfig: JSON.stringify(data.formConfig),
        widgetList: JSON.stringify(data.widgetList),
      });
      if (res.code == 200) {
        this.$message.success("保存成功");
        // this.close()
      }
    },
    close(){
      sessionStorage.setItem("designParams", JSON.stringify({isDetail:true,appId:this.appId,index:'2',tablePrefix:this.tablePrefix}));
       this.$router.push({
        path:'/app/appInfo',
       })
       
    }
  },
};
</script>

<style lang="scss" scoped>
.formDesign {
  position: relative;
  .full-height {
    margin: 0 !important;
  }
  ::v-deep .el-tabs--top {
    width: 100%;
  }
  
}
</style>